import 'package:flutter/material.dart';
import '../../../../widgets/common_title.dart';
import 'data.dart';
import '../../../../scoped_model/room_filter.dart';
import '../../../../utils/scoped_model_helper.dart';

class FilterDrawer extends StatelessWidget {
  const FilterDrawer({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var selectedIds = ScopedModelHelper.getModel<FilterBarModel>(context)
        .selectedList
        .toList();

    _onChange(String val) {
      ScopedModelHelper.getModel<FilterBarModel>(context).selectedListTroggleItem(val);
    }

    return Drawer(
      child: SafeArea(
        child: ListView(
          children: [
            CommonTitle('户型'),
            FilterDrawerItem(
              list: roomTypeList,
              selectedIds: selectedIds,
              onChange: _onChange,
            ),
            CommonTitle('朝向'),
            FilterDrawerItem(
              list: orientedList,
              selectedIds: selectedIds,
              onChange: _onChange,
            ),
            CommonTitle('楼层'),
            FilterDrawerItem(
              list: floorList,
              selectedIds: selectedIds,
              onChange: _onChange,
            ),
          ],
        ),
      ),
    );
  }
}

class FilterDrawerItem extends StatelessWidget {
  final List<GeneralType> list;
  final List<String> selectedIds;
  final ValueChanged<String> onChange;

  const FilterDrawerItem({Key key, this.list, this.selectedIds, this.onChange})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(left: 10.0, right: 10.0),
      child: Wrap(
        spacing: 10.0,
        runSpacing: 10.0,
        children: list.map((item) {
          var isAcitve = selectedIds.contains(item.id);
          return GestureDetector(
            onTap: () {
              if (onChange != null) onChange(item.id);
            },
            behavior: HitTestBehavior.translucent,
            child: Container(
              width: 100.0,
              height: 30.0,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.green, width: 1.0),
                color: isAcitve ? Colors.green : Colors.white
              ),
              child: Center(
                child: Text(
                  item.name,
                  style:
                      TextStyle(color: isAcitve ? Colors.white : Colors.black),
                ),
              ),
            ),
          );
        }).toList(),
      ),
    );
  }
}
